<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>五子棋 - 注册</title>
    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        wood: {
                            light: '#E6D2B5',
                            DEFAULT: '#C8A97E',
                            dark: '#8B6E4E'
                        },
                        stone: {
                            white: '#F9F9F9',
                            black: '#2D2D2D'
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'piece': '0 4px 8px rgba(0, 0, 0, 0.15)',
                        'board': 'inset 0 0 15px rgba(0, 0, 0, 0.2)'
                    }
                }
            }
        }
    </script>
    
    <!-- 自定义样式 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .board-pattern {
                background-image: 
                    linear-gradient(rgba(139, 110, 78, 0.15) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(139, 110, 78, 0.15) 1px, transparent 1px);
                background-size: 24px 24px;
            }
            .piece-transition {
                transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            }
            .wood-texture {
                background-image: url('./image/login.jpg');
                background-size: cover;
                background-position: center;
                background-blend-mode: overlay;
            }
            .transparent-bg {
                background-color: rgba(255, 255, 255, 0.1);
                /* backdrop-blur: 10px; */
                border: 1px solid rgba(255, 255, 255, 0.2);
            }
            .glass-effect {
                background: rgba(255, 255, 255, 0.15);
                /* backdrop-blur: 8px; */
                border: 1px solid rgba(255, 255, 255, 0.1);
            }
        }
    </style>
</head>
<body class="min-h-screen bg-stone-black/90 wood-texture flex items-center justify-center p-4 md:p-0">
    <!-- 主容器 -->
    <div class="w-full max-w-md">
        <!-- 注册卡片 -->
        <div class="glass-effect rounded-xl shadow-piece overflow-hidden transform hover:scale-[1.01] transition-all duration-300">
            <!-- 头部装饰 -->
            <div class="h-2 bg-gradient-to-r from-stone-black/80 to-wood-dark/80"></div>
            
            <!-- 标题区域 -->
            <div class="p-6 text-center relative">
                <div class="w-16 h-16 bg-stone-black/80 rounded-full flex items-center justify-center mx-auto -mt-2 mb-4 shadow-md">
                    <span class="text-white text-2xl font-bold">棋</span>
                </div>
                <h1 class="text-[clamp(1.5rem,5vw,2rem)] font-bold text-white mb-2">五子棋</h1>
                <p class="text-gray-200 text-sm">创建账号开启你的博弈之旅</p>
                
                <!-- 装饰棋子 -->
                <div class="absolute -top-3 -left-3 w-6 h-6 bg-stone-white/90 border-2 border-wood-dark/80 rounded-full"></div>
                <div class="absolute -bottom-2 -right-2 w-8 h-8 bg-stone-black/90 rounded-full"></div>
            </div>
            
            <!-- 注册表单 -->
            <form class="p-6 pt-0 space-y-5">
                <!-- 用户名输入 -->
                <div class="relative">
                    <div class="absolute left-3 top-1/2 -translate-y-1/2 text-white/80">
                        <i class="fa fa-user"></i>
                    </div>
                    <input 
                        type="text" 
                        placeholder="用户名" 
                        class="w-full pl-10 pr-4 py-3 rounded-lg border border-white/20 bg-white/10 text-white placeholder-gray-300 focus:bg-white/20 focus:border-wood focus:ring-2 focus:ring-wood/30 outline-none piece-transition"
                        required
                        id="reg_username"
                    >
                </div>
                
                <!-- 昵称输入 -->
                <div class="relative">
                    <div class="absolute left-3 top-1/2 -translate-y-1/2 text-white/80">
                        <i class="fa fa-id-card"></i>
                    </div>
                    <input 
                        type="text" 
                        placeholder="昵称" 
                        class="w-full pl-10 pr-4 py-3 rounded-lg border border-white/20 bg-white/10 text-white placeholder-gray-300 focus:bg-white/20 focus:border-wood focus:ring-2 focus:ring-wood/30 outline-none piece-transition"
                        required
                        id="reg_nickname"
                    >
                </div>
                
                <!-- 邮箱输入 -->
                <div class="relative">
                    <div class="absolute left-3 top-1/2 -translate-y-1/2 text-white/80">
                        <i class="fa fa-envelope"></i>
                    </div>
                    <input 
                        type="email" 
                        placeholder="邮箱" 
                        class="w-full pl-10 pr-4 py-3 rounded-lg border border-white/20 bg-white/10 text-white placeholder-gray-300 focus:bg-white/20 focus:border-wood focus:ring-2 focus:ring-wood/30 outline-none piece-transition"
                        required
                        id="reg_email"
                    >
                </div>
                
                <!-- 密码输入 -->
                <div class="relative">
                    <div class="absolute left-3 top-1/2 -translate-y-1/2 text-white/80">
                        <i class="fa fa-lock"></i>
                    </div>
                    <input 
                        type="password" 
                        placeholder="密码" 
                        class="w-full pl-10 pr-4 py-3 rounded-lg border border-white/20 bg-white/10 text-white placeholder-gray-300 focus:bg-white/20 focus:border-wood focus:ring-2 focus:ring-wood/30 outline-none piece-transition"
                        required
                        id="reg_pwd"
                    >
                </div>
                
                <!-- 确认密码输入 -->
                <div class="relative">
                    <div class="absolute left-3 top-1/2 -translate-y-1/2 text-white/80">
                        <i class="fa fa-lock"></i>
                    </div>
                    <input 
                        type="password" 
                        placeholder="确认密码" 
                        class="w-full pl-10 pr-4 py-3 rounded-lg border border-white/20 bg-white/10 text-white placeholder-gray-300 focus:bg-white/20 focus:border-wood focus:ring-2 focus:ring-wood/30 outline-none piece-transition"
                        required
                        id="reg_pwd_confirm"
                    >
                </div>
                
                <!-- 同意条款 -->
                <div class="flex items-start gap-2">
                    <input type="checkbox" id="agree_terms" class="mt-1" required>
                    <label for="agree_terms" class="text-gray-300 text-sm">
                        我已阅读并同意<a href="#" class="text-wood-light hover:text-wood transition-colors">服务条款</a>和<a href="#" class="text-wood-light hover:text-wood transition-colors">隐私政策</a>
                    </label>
                </div>
                
                <!-- 注册按钮 -->
                <button 
                    type="button" 
                    class="w-full bg-stone-black/80 text-white font-medium py-3 px-4 rounded-lg hover:bg-wood-dark/90 piece-transition flex items-center justify-center gap-2"
                    onclick="register()">
                    <span>注册</span>
                    <i class="fa fa-check"></i>
                </button>
            </form>
            
            <!-- 登录区域 -->
            <div class="glass-effect p-5 text-center">
                <p class="text-gray-300 text-sm">
                    已有账号? 
                    <a href="/" class="text-wood-light font-medium hover:text-wood transition-colors">立即登录</a>
                </p>
            </div>
        </div>
        
        <!-- 页脚 -->
        <p class="text-center text-white/60 text-xs mt-6 backdrop-blur-sm">
            &copy; 2025 五子棋 - 享受纯粹的博弈乐趣
        </p>
    </div>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function register() {
        // 获取表单数据
        var username = document.getElementById('reg_username').value;
        var nickname = document.getElementById('reg_nickname').value;
        var email = document.getElementById('reg_email').value;
        var password = document.getElementById('reg_pwd').value;
        var confirmPassword = document.getElementById('reg_pwd_confirm').value;
        var agreeTerms = document.getElementById('agree_terms').checked;
        
        // 简单验证
        if (!agreeTerms) {
            alert('请同意服务条款和隐私政策');
            return;
        }
        
        if (password !== confirmPassword) {
            alert('两次输入的密码不一致');
            return;
        }
        
        // 构造注册信息
        var reg_info = {
            username: username,
            nickname: nickname,
            email: email,
            password: password
        };
        
        // 发送注册请求
        $.ajax({
            url: "/register",
            method: "post",
            data: JSON.stringify(reg_info),
            success: function () {
                alert("注册成功，请登录");
                window.location.assign("/index.html");
            },
            error: function (xhr, status, error) {
                console.log("请求出错:", xhr,status,xhr.responseText);
                alert(`注册失败，原因:${xhr.responseText}`);
                document.getElementById("reg_username").value = "";
                document.getElementById("reg_nickname").value = "";
                document.getElementById("reg_email").value = "";
                document.getElementById("reg_pwd").value = "";
                document.getElementById("reg_pwd_confirm").value = "";
            }
        });
    }
</script>
</html>    